<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>文件分块上传示例</title>
	</head>

	<body>

		<input type="file" id="fileUpload" multiple>
		<progress id="uploadProgress" value="0" max="100"></progress>
		<button id="uploadButton">上传文件</button>
		<!--
	1.创建了一个file文件输入框，其中multiple属性允许用户选择多个文件进行上传。
	2.创建了一个progress元素，用于展示文件上传的进度，初始值设为 0，最大值设为 100。
	3.创建一个button上传按钮，点击该按钮来触发文件上传操作。
  -->

	</body>

	<script>
 
	//获取 HTML 页面中的文件输入框、进度条和上传按钮的引用，以便后续操作。
	const fileUpload = document.getElementById('fileUpload');
	const uploadProgress = document.getElementById('uploadProgress');
	const uploadButton = document.getElementById('uploadButton');
 
	//定义了CHUNK_SIZE常量，用于设置文件分块的大小，这里设为 1MB（1024 * 1024字节）。
	const CHUNK_SIZE = 1024 * 1024; 
 
	//给上传按钮添加点击事件监听器
	uploadButton.addEventListener('click', function () {
		const files = fileUpload.files;
		//检查是否选择了文件，若未选择则弹出提示框告知用户并终止操作
		if (files.length === 0) {
		alert('请选择要上传的文件');
			return;
		}
 
		//这里先假设只上传单个文件，如需上传多个可进行循环处理
		const file = files[0]; 
		
		//offset用于记录当前已上传的字节偏移量，初始为 0；
		//totalChunks通过文件总大小除以分块大小并向上取整得到文件总共要分成的块数；
		//uploadedChunks用于记录已经上传成功的块数，初始为 0。
		let offset = 0;
		const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
		let uploadedChunks = 0;
		
		//定义uploadChunk函数用于上传单个分块
		function uploadChunk() {
			const chunkEnd = Math.min(offset + CHUNK_SIZE, file.size);
			const chunk = file.slice(offset, chunkEnd);
 
			const formData = new FormData();
			formData.append('chunk', chunk);
			formData.append('filename', file.name);
			formData.append('totalChunks', totalChunks);
			formData.append('uploadedChunks', uploadedChunks);
 
			const xhr = new XMLHttpRequest();
			xhr.open('POST', 'http://47.96.22.83:8180/download/head/head01', true);
 
			xhr.upload.onprogress = function (e) {
			  if (e.lengthComputable) {
				const percentComplete = ((uploadedChunks * CHUNK_SIZE + e.loaded) / file.size) * 100;
				uploadProgress.value = percentComplete;
			  }
			};
 
			xhr.onload = function () {
                document.writeln("onload !!!");
				if (xhr.status === 200) {
					uploadedChunks++;
					if (uploadedChunks < totalChunks) {
					  offset += CHUNK_SIZE;
					  //采用递归调用的方式，继续调用uploadChunk函数上传下一个块
					  uploadChunk();
					} else {
					  alert('文件上传成功');
					}
				} else {
					alert('文件上传失败：' + xhr.statusText);
				}
			};
            document.writeln("uploadChunk !!!");
			xhr.send(formData);
		}
		//调用uploadChunk函数开始上传第一个分块
		uploadChunk();
	});
</script>

</html>